define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    //设置弹窗宽高
    Fast.config.openArea = ['70%', '85%'];
    var imgsettimer = 0 ;
    var nametimer = 0;
    var bgtimer = 0 ;
    var qrtimer = 0 ;
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'poster/index' + location.search,
                    add_url: 'poster/add',
                    edit_url: 'poster/edit',
                    del_url: 'poster/del',
                    multi_url: 'poster/multi',
                    table: 'poster',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                commonSearch: false,
                showToggle: false,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'title', title: __('Title')},
                        {field: 'bg_image', title: __('Bg_image'), events: Table.api.events.image, formatter: Table.api.formatter.image},
                        {field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
                        {field: 'weigh', title: __('Weigh')},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {
                            field: 'datalist', title: __('Operate'), table: table,operate:false,
                            buttons: [
                                {
                                    name: 'content',
                                    text: __('Posterrecord'),
                                    classname: 'btn btn-xs btn-success btn-dialog',
                                    icon: 'fa fa-list-ul',
                                    url: 'poster/posterrecord/ids/{ids}'
                                }
                            ],
                            formatter: Table.api.formatter.buttons
                        },
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });
            // 为表格绑定事件
            Table.api.bindevent(table);

            table.on('post-body.bs.table', function () {
                $(".btn-editone").data("area", ["1024px", "678px"]);
            });
        },
        posterrecord: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'poster/posterrecord' + location.search + '&ids=' + Config.ids,
                    table: 'poster',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                commonSearch: false,
                showToggle: false,
                columns: [
                    [
                        {field: 'id', title: __('Id')},
                        {field: 'user.nickname', title: __('Nickname')},
                        {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.image},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                    ]
                ]
            });
            // 为表格绑定事件
            Table.api.bindevent(table);

            // 清空海报
            $('.btn-clear').click(function(){
                var url = $(this).data('url');
                Fast.api.ajax({
                    url: url,
                }, function (data, ret) {
                    table.bootstrapTable('refresh', {});
                }, function (data, ret) {

                });
            });
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                $("form[role=form]").data("validator-options", {ignore: ':hidden'});

                //表单提交事件绑定
                Form.api.bindevent($("form[role=form]"), function (data, ret) {}, function (data, ret) {}, function (success, error) {
                    var data = [];
                    $('.drag').each(function () {
                        var obj = $(this);
                        var type = obj.attr('type');
                        var left = obj.css('left'), top = obj.css('top');
                        var d = {
                            left: left,
                            top: top,
                            type: obj.attr('type'),
                            width: obj.css('width'),
                            height: obj.css('height')
                        };
                        if (type == 'nickname') {
                            d.size = obj.attr('size');
                            d.color = obj.attr('color');
                        } else if (type == 'qr') {
                            d.size = obj.attr('size');
                            d.qr_text = obj.attr('qr_text');
                            d.qr_table = obj.attr('qr_table');
                            d.qr_field = obj.attr('qr_field');
                            d.qr_relation = obj.attr('qr_relation');
                        } else if (type == 'img') {
                            d.src = Fast.api.cdnurl(obj.attr('src'));
                        }
                        data.push(d);
                    });
                    $(':input[name="row[data]"]').val(JSON.stringify(data));
                });

                //图片地址变化
                $('#c-bg_image').on('change', function () {
                    $('.bg').remove();
                    $('#poster').prepend("<img src='" + Fast.api.cdnurl($(this).val()) + "' class='bg'/>");
                });
                $('#c-img').on('change', function () {
                    $('.drag').each(function () {
                        if ($(this).attr("type") == 'img') {
                            $(this).find('img').attr('src', Fast.api.cdnurl($('#c-img').val()));
                        }
                    });
                });

                // 移除图片事件
                $(document.body).on("click", "#p-bg_image .btn-trash", function () {
                    $('.bg').attr('src', '');
                });
                $(document.body).on("click", "#p-img .btn-trash", function () {
                    $('.drag').each(function () {
                        if ($(this).attr("type") == 'img') {
                            $(this).attr('src', '');
                            $(this).find('img').attr('src', '/assets/addons/poster/images/img.jpg');
                        }
                    });
                });

                require(['designer'], function () {
                    //添加元素
                    $('.btn-com').click(function(){
                        var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
                        imgset.hide(),nameset.hide(),qrset.hide();
                        Controller.api.clearTimers();
                        var type = $(this).data('type');
                        $('.drag').each(function () {
                            if ($(this).attr("type") == type) {
                                type = false;
                            }
                        });

                        if(type == false){
                            Layer.msg('请不要重复添加');
                        }else{
                            var img = "";
                            if(type=='qr'){
                                img = '<img src="/assets/addons/poster/images/qr.jpg" />';
                            } else if(type=='head'){
                                img = '<img src="/assets/addons/poster/images/head.jpg" />';
                            } else if(type=='img' || type=='thumb'){
                                img = '<img src="/assets/addons/poster/images/img.jpg" />';
                            } else if(type=='nickname'){
                                img = '<div class=text>会员昵称</div>';
                            }
                            var index = $('#poster .drag').length + 1;
                            var obj = $('<div class="drag" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' + img+'<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');
                            $('#poster').append(obj);
                            Controller.api.bindEvents(obj);
                            Controller.api.bind(obj);
                        }
                    });

                    $('.drag').each(function () {
                        Controller.api.bindEvents($(this));
                        Controller.api.bind($(this));
                    });

                });

                //颜色
                Controller.api.color();

                //二维码内容类型改变事件
                $(document).on('change', ".qr_type", function () {
                    console.log($(this).val());
                    if ($(this).val() == 0) {
                        $('.qrset0').show();
                        $('.qrset1').hide();
                    } else {
                        $('.qrset0').hide();
                        $('.qrset1').show();
                    }
                });

                //选择二维码数据表
                $(document).on('change', "select[name='qr_table']", function () {
                    var that = this;
                    Fast.api.ajax({
                        url: "poster/get_field_list",
                        data: {table: $(that).val()},
                    }, function (data, ret) {
                        mainfields = data.fieldlist;
                        renderselect($("#c-qr_field"), mainfields, 'qr_field');//渲染数据
                        renderselect($("#c-qr_relation"), mainfields, 'qr_relation');//渲染数据
                        return false;
                    });
                    return false;
                });
                var renderselect = function (select, data, field_type) {
                    var html = [];
                    html.push("<option value=''>请选择</option>");
                    for (var i = 0; i < data.length; i++) {
                        html.push("<option value='" + data[i] + "'>" + data[i] + "</option>");
                    }
                    select.html(html.join(""));
                    select.trigger("change");
                    if (select.data("selectpicker")) {
                        $('.drag').each(function () {
                            var type = $(this).attr('type');
                            if(type == 'qr'){
                                if(field_type == 'qr_field'){
                                    var qr_field = $(this).attr('qr_field') || "";
                                    select.selectpicker('val', qr_field).trigger("change").trigger("validate");
                                } else {
                                    var qr_relation = $(this).attr('qr_relation') || "";
                                    select.selectpicker('val', qr_relation).trigger("change").trigger("validate");
                                }
                            }
                        });
                        select.selectpicker('refresh').trigger("change");
                    }
                    return select;
                };
                $("select[name='qr_table']").trigger("change");
            },
            bindEvents: function (obj) {
                var index = obj.attr('index');
                var rs = new Resize(obj, { Max: true, mxContainer: "#poster" });
                rs.Set($(".rRightDown",obj), "right-down");
                rs.Set($(".rLeftDown",obj), "left-down");
                rs.Set($(".rRightUp",obj), "right-up");
                rs.Set($(".rLeftUp",obj), "left-up");
                rs.Set($(".rRight",obj), "right");
                rs.Set($(".rLeft",obj), "left");
                rs.Set($(".rUp",obj), "up");
                rs.Set($(".rDown",obj), "down");
                rs.Scale = true;
                var type = obj.attr('type');
                if(type=='nickname' || type=='img' || type=='title' || type=='marketprice' || type=='productprice'){
                    rs.Scale = false;
                }
                new Drag(obj, { Limit: true, mxContainer: "#poster" });
                $('.drag .remove').unbind('click').click(function(){
                    $(this).parent().remove();
                })
                require(['jquery.contextMenu'],function(){
                    $.contextMenu({
                        selector: '.drag[index=' + index + ']',
                        callback: function(key, options) {
                            var index = parseInt($(this).attr('zindex'));

                            if(key=='next'){
                                var nextdiv = $(this).next('.drag');
                                if(nextdiv.length>0 ){
                                    nextdiv.insertBefore($(this));
                                }
                            } else if(key=='prev'){
                                var prevdiv = $(this).prev('.drag');
                                if(prevdiv.length>0 ){
                                    $(this).insertBefore(prevdiv);
                                }
                            } else if(key=='last'){
                                var len = $('.drag').length;
                                if(index >=len-1){
                                    return;
                                }
                                var last = $('#poster .drag:last');
                                if(last.length>0){
                                    $(this).insertAfter(last);
                                }
                            }else if(key=='first'){
                                var index = $(this).index();
                                if(index<=1){
                                    return;
                                }
                                var first = $('#poster .drag:first');
                                if(first.length>0){
                                    $(this).insertBefore(first);
                                }
                            }else if(key=='delete'){
                                $(this).remove();
                                $('.imgset').hide();
                                $('.qrset').hide();
                                $('.nameset').hide();
                            }
                            var n =1 ;
                            $('.drag').each(function(){
                                $(this).css("z-index",n);
                                n++;
                            })
                        },
                        items: {
                            "last": {name: "调整到最顶层"},
                            "first": {name: "调整到最低层"},
                            "delete": {name: "删除元素"}
                        }
                    });
                    obj.unbind('click').click(function () {
                        Controller.api.bind($(this));
                    });
                });
            },
            color: function () {
                var refreshStyle = function () {
                    var style = [];
                    if ($(".btn-color").hasClass("active")) {
                        style.push($(".btn-color").data("color"));
                    }
                    $("#c-color").val(style.join("|"));
                };
                if ($(".btn-color").hasClass("active")) {
                    style.push($(".btn-color").data("color"));
                }
                require(['jquery-colorpicker'], function () {
                    $('.colorpicker').colorpicker({
                        color: function () {
                            var color = "#000000";
                            var rgb = $("#c-color").css('color').match(/^rgb\(((\d+),\s*(\d+),\s*(\d+))\)$/);
                            if (rgb) {
                                color = rgb[1];
                            }
                            return color;
                        }
                    }, function (event, obj) {
                        $("#c-color").css('color', '#' + obj.hex);
                        $(event).addClass("active").data("color", '#' + obj.hex);
                        refreshStyle();
                    }, function (event) {
                        $("#c-color").css('color', 'inherit');
                        $(event).removeClass("active");
                        refreshStyle();
                    });
                });
            },
            bind: function (obj) {
                $('.drag').addClass('notsel');
                $(obj).removeClass('notsel');

                var imgset = $('.imgset'), nameset = $(".nameset"), qrset = $('.qrset');
                imgset.hide(), nameset.hide(), qrset.hide();
                Controller.api.clearTimers();
                var type = obj.attr('type');

                //图片
                if(type=='img'){
                    imgset.show();
                    var src = obj.attr('src');
                    var input = imgset.find('#c-img');

                    if(typeof(src)!='undefined' && src!=''){
                        input.val(src).trigger("change").trigger("validate");
                    }
                    imgsettimer = setInterval(function(){
                        if(input.val()!=src && input.val()!=''){
                            var url = input.val();
                            obj.attr('src', Fast.api.cdnurl(input.val()));
                        }
                    },800);

                    //昵称
                } else if(type=='nickname'){
                    nameset.show();
                    var color = obj.attr('color') || "#000";
                    var size = obj.attr('size') || "16";
                    var input = nameset.find('input:first');
                    var namesize = nameset.find('#namesize');
                    var picker = nameset.find('.sp-preview-inner');
                    input.val(color);
                    namesize.val(size.replace("px", ""));
                    picker.css({'background-color': color, 'font-size': size});

                    nametimer = setInterval(function(){
                        obj.attr('color', input.val()).find('.text').css('color', input.val());
                        obj.attr('size', namesize.val() + "px").find('.text').css('font-size', namesize.val() + "px");
                    },800);

                    //二维码
                } else if(type=='qr'){
                    qrset.show();
                    //得到属性上的值
                    var qr_text = obj.attr('qr_text') || "";
                    var qr_table = obj.attr('qr_table') || "";
                    var qr_field = obj.attr('qr_field') || "";
                    var qr_relation = obj.attr('qr_relation') || "";

                    //表单
                    var qrtext = qrset.find("input[name='qr_text']");
                    var qrtable = qrset.find("select[name='qr_table']");
                    var qrfield = qrset.find("#c-qr_field");
                    var qrrelation = qrset.find("#c-qr_relation");

                    //编辑的时候吧属性值设置到编辑框
                    if(typeof(qr_text)!='undefined' && qr_text!=''){
                        qrtext.val(qr_text);
                    }
                    if(typeof(qr_table)!='undefined' && qr_table!=''){
                        qrtable.val(qr_table).trigger("change").trigger("validate");
                    }
                    if(typeof(qr_relation)!='undefined' && qr_relation!=''){
                        qrrelation.val(qr_relation).trigger("change").trigger("validate");
                    }

                    //修改内容的时候设置attr
                    qrtimer = setInterval(function(){
                        if(qrtext.val()!=qr_text && qrtext.val()!='' && qrtext.val() != 'null' && qrtext.val() != null){
                            obj.attr('qr_text', qrtext.val());
                        }
                        if(qrtable.val()!=qr_table && qrtable.val()!='' && qrtable.val() != 'null' && qrtable.val() != null){
                            obj.attr('qr_table', qrtable.val());
                        }
                        if(qrfield.val()!=qr_field && qrfield.val()!='' && qrfield.val() != 'null' && qrfield.val() != null){
                            obj.attr('qr_field', qrfield.val());
                        }
                        if(qrrelation.val()!=qr_relation && qrrelation.val()!='' && qrrelation.val() != 'null' && qrrelation.val() != null){
                            obj.attr('qr_relation', qrrelation.val());
                        }
                    },800);
                }
            },

            clearTimers: function () {
                clearInterval(imgsettimer);
                clearInterval(nametimer);
                clearInterval(bgtimer);
                clearInterval(qrtimer);
            }
        }
    };
    return Controller;
});